{% extends "base.html" %}

{% block title %}首页 - 漫画阅读器{% endblock %}

{% block content %}
<div class="home-container">
    <!-- 欢迎区域 -->
    <section class="welcome-section">
        <div class="welcome-content">
            <h1 class="welcome-title">欢迎使用漫画阅读器</h1>
            <p class="welcome-subtitle">在线阅读您的漫画收藏</p>
            
            <div class="quick-actions">
                <a href="{{ url_for('main.comic_list') }}" class="action-btn primary">
                    <span class="btn-icon">📖</span>
                    <span class="btn-text">浏览漫画</span>
                </a>
                <a href="{{ url_for('main.scan_comics') }}" class="action-btn secondary">
                    <span class="btn-icon">🔄</span>
                    <span class="btn-text">扫描漫画</span>
                </a>
            </div>
        </div>
    </section>

    <!-- 统计信息 -->
    <section class="stats-section">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon">📚</div>
                <div class="stat-content">
                    <div class="stat-number">{{ stats.total_comics or 0 }}</div>
                    <div class="stat-label">部漫画</div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">📑</div>
                <div class="stat-content">
                    <div class="stat-number">{{ stats.total_chapters or 0 }}</div>
                    <div class="stat-label">个章节</div>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon">📄</div>
                <div class="stat-content">
                    <div class="stat-number">{{ stats.total_pages or 0 }}</div>
                    <div class="stat-label">页内容</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 最近添加的漫画 -->
    {% if recent_comics %}
    <section class="recent-section">
        <div class="section-header">
            <h2 class="section-title">最近添加</h2>
            <a href="{{ url_for('main.comic_list') }}" class="section-link">查看全部</a>
        </div>
        
        <div class="comics-grid">
            {% for comic in recent_comics %}
            <div class="comic-card">
                <a href="{{ url_for('main.comic_detail', comic_id=comic.id) }}" class="comic-link">
                    <div class="comic-cover">
                        {% if comic.cover_image %}
                            <img src="/api/thumbnail/{{ comic.cover_image | urlencode }}" 
                                 alt="{{ comic.title }}" 
                                 loading="lazy"
                                 onerror="this.src='/static/images/icons/default-cover.png'">
                        {% else %}
                            <div class="cover-placeholder">
                                <span class="placeholder-icon">📖</span>
                            </div>
                        {% endif %}
                        
                        <div class="comic-overlay">
                            <div class="comic-info">
                                <span class="comic-chapters">{{ comic.total_chapters }}章</span>
                                <span class="comic-pages">{{ comic.total_pages }}页</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="comic-meta">
                        <h3 class="comic-title">{{ comic.title }}</h3>
                        <div class="comic-stats">
                            <span class="stat-item">
                                <span class="stat-icon">📑</span>
                                <span class="stat-text">{{ comic.total_chapters }}章</span>
                            </span>
                            <span class="stat-item">
                                <span class="stat-icon">📄</span>
                                <span class="stat-text">{{ comic.total_pages }}页</span>
                            </span>
                        </div>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <!-- 功能介绍 -->
    <section class="features-section">
        <div class="section-header">
            <h2 class="section-title">功能特色</h2>
        </div>
        
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">📱</div>
                <div class="feature-content">
                    <h3 class="feature-title">移动端适配</h3>
                    <p class="feature-desc">响应式设计，完美适配手机和平板设备</p>
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">👆</div>
                <div class="feature-content">
                    <h3 class="feature-title">手势操作</h3>
                    <p class="feature-desc">支持左右滑动切换页面，双击缩放图片</p>
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <div class="feature-content">
                    <h3 class="feature-title">智能缓存</h3>
                    <p class="feature-desc">自动预加载和缓存，提供流畅的阅读体验</p>
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">🗂️</div>
                <div class="feature-content">
                    <h3 class="feature-title">多层目录</h3>
                    <p class="feature-desc">支持复杂的目录结构，自动识别章节</p>
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">🐳</div>
                <div class="feature-content">
                    <h3 class="feature-title">Docker部署</h3>
                    <p class="feature-desc">一键部署，简单配置，跨平台运行</p>
                </div>
            </div>
            
            <div class="feature-card">
                <div class="feature-icon">🔍</div>
                <div class="feature-content">
                    <h3 class="feature-title">智能搜索</h3>
                    <p class="feature-desc">快速查找您想要的漫画内容</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用指南 -->
    <section class="guide-section">
        <div class="section-header">
            <h2 class="section-title">使用指南</h2>
        </div>
        
        <div class="guide-steps">
            <div class="step-card">
                <div class="step-number">1</div>
                <div class="step-content">
                    <h3 class="step-title">放置漫画文件</h3>
                    <p class="step-desc">将漫画图片文件放置在指定的漫画目录中</p>
                </div>
            </div>
            
            <div class="step-card">
                <div class="step-number">2</div>
                <div class="step-content">
                    <h3 class="step-title">扫描漫画</h3>
                    <p class="step-desc">点击"扫描漫画"按钮，系统会自动识别和索引您的漫画</p>
                </div>
            </div>
            
            <div class="step-card">
                <div class="step-number">3</div>
                <div class="step-content">
                    <h3 class="step-title">开始阅读</h3>
                    <p class="step-desc">在漫画列表中选择想要阅读的漫画，享受阅读体验</p>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock %}

{% block scripts %}
<script>
// 首页特定脚本
document.addEventListener('DOMContentLoaded', function() {
    // 统计数字动画
    const statNumbers = document.querySelectorAll('.stat-number');
    statNumbers.forEach(function(element) {
        const target = parseInt(element.textContent);
        let current = 0;
        const increment = target / 30; // 30帧动画
        const timer = setInterval(function() {
            current += increment;
            if (current >= target) {
                element.textContent = target;
                clearInterval(timer);
            } else {
                element.textContent = Math.floor(current);
            }
        }, 50);
    });

    // 懒加载图片
    const images = document.querySelectorAll('img[loading="lazy"]');
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src || img.src;
                    img.classList.remove('lazy');
                    imageObserver.unobserve(img);
                }
            });
        });

        images.forEach(function(img) {
            imageObserver.observe(img);
        });
    }
});
</script>
{% endblock %}